<template>
	<scroll-view class="scroll-style" scroll-y style="height: calc(100vh - var(--window-bottom));">
		<view class="header-top">
			<image class="logo" src="@/static/image/logo.png"></image>
		</view>
		<view class="content-absolute">
			<swiper class="swiper-box" indicator-color="#fff" autoplay="true" interval="5000" circular="true"
				indicator-dots="true">
				<swiper-item v-for="(item, index) in model.lb" :key="index">
					<image :src="item.imageUrl" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="icons-box">
				<block v-for="(item, index) in icons" :key="index">
					<view class="icon" @click="skip(item.icon)">
						<image :src="'../../static/image/' + item.icon + '.png'" mode="aspectFit"></image>
						<text>{{item.title}}</text>
					</view>
				</block>
			</view>

			<swiper class="ad-swiper">
				<swiper-item v-for="(item, index) in model.advertisedList" :key="index">
					<image :src="item.iamge" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<view class="section-box">
				<view class="row-center">
					<image class="zx-icon" src="@/static/image/zx.png"></image>
					<text class="zx-title">资讯</text>
				</view>
				<view class="row-center" @click="skipMedia">
					<text class="more">查看更多</text>
					<image class="right" src="@/static/image/right.png"></image>
				</view>
			</view>
			<view class="media-list">
				<block v-for="(item, index) in model.articleVoList" :key="index">
					<view class="media-box" @click="skipMediaDetail(item)">
						<image class="image" :src="item.mainImageUrl" mode="aspectFill"></image>
						<view class="right-box">
							<text class="title">{{item.title}}</text>
							<view class="bottom">
								<view class="row-center">
									<view class="tag">{{item.informationTypeNameCN}}</view>
									<view class="row-center">
										<image class="hits-icon" src="@/static/image/ckrs.png"></image>
										<text class="hits">{{item.view}}</text>
									</view>
								</view>
								<view class="inputtime">{{item.releaseTime}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="model.organizationInfoShowVo">
					<view class="text" style="margin-top: 30rpx;" @click="makePhoneCall">
						机构联系电话:
						<text class="phone">{{model.organizationInfoShowVo.phone}}</text>
					</view>
					<text class="text">地址: {{model.organizationInfoShowVo.address}}</text>
				</block>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { oauth } from '@/api/index';
	import { indexData } from '@/api/index/index';
	import global from '@/utils/global.js';
	export default {
		data() {
			return {
				model: {},
				icons: [{
					title: '心愿墙',
					icon: 'xyq'
				}, {
					title: '公益活动',
					icon: 'gyhd'
				}, {
					title: '建议',
					icon: 'jy'
				}, {
					title: '公益机构',
					icon: 'gyjg'
				}]
			}
		},
		onLoad() {
			this.loadData();
			// this.login();
		},
		methods: {
			loadData() {
				indexData(response => {
					this.model = response;
				})
			},

			/* 根据type不同跳转不同界面 */
			skip(type) {
				if (type == 'xyq') {
					uni.switchTab({
						url: '/pages/wish/index'
					})
				}
				if (type == 'gyhd') {
					uni.switchTab({
						url: '/pages/activity/index'
					})
				}
				if (type == 'jy') {
					uni.navigateTo({
						url: '/pages/index/suggest'
					})
				}
				if (type == 'gyjg') {
					uni.navigateTo({
						url: '/pages/index/organization'
					})
				}
			},

			/* 跳转资讯列表 */
			skipMedia() {
				uni.navigateTo({
					url: '/pages/media/index'
				})
			},
			
			/* 跳转资讯详情 */
			skipMediaDetail(item) {
				item.view = item.view + 1;
				uni.navigateTo({
					url: `/pages/media/detail?id=${item.id}`
				})
			},

			/* 登录相关 */
			login() {
				// let token = uni.getStorageSync('token') || '';
				// if (token) {
				// 	return;
				// }

				let code = this.getQueryString('code') || '9999';
				if (code) {
					oauth({
						code: code,
						grant_type: 'password'
					}, response => {
						let token = response.token;
						uni.setStorageSync('token', token);
					})
				} else {
					window.location = global.oauth;
				}
			},

			/* 获取链接里面的cdoe */
			getQueryString(key) {
				const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
				const search = window.location.search.split('?')[1] || '';
				const r = search.match(reg) || [];
				return r[2];
			},

			/* 拨打电话 */
			makePhoneCall() {
				if (this.model.organizationInfoShowVo.phone) {
					uni.makePhoneCall({
						phoneNumber: this.model.organizationInfoShowVo.phone
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		margin: 20rpx 30rpx 0;
		width: 690rpx;
		height: 290rpx;

		image {
			width: 690rpx;
			height: 290rpx;
			border-radius: 20rpx;
		}
	}

	.icons-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 50rpx 70rpx 0;

		.icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			color: #000000;

			image {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.ad-swiper {
		margin: 20rpx 30rpx 0;
		width: 690rpx;
		height: 180rpx;

		image {
			width: 690rpx;
			height: 180rpx;
			border-radius: 16rpx;
		}
	}

	.section-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 30rpx 0;

		.zx-icon {
			width: 32rpx;
			height: 34rpx;
		}

		.zx-title {
			margin-left: 10rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}

		.more {
			font-size: 26rpx;
			color: #888888;
		}

		.right {
			margin-left: 6rpx;
			width: 14rpx;
			height: 26rpx;
		}
	}

	.media-list {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		background-color: #F5F6F7;
		padding: 10rpx 0 30rpx;

		.media-box {
			display: flex;
			margin: 16rpx 30rpx 0;
			padding: 30rpx 25rpx;
			background-color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid #ebecfe;

			.image {
				width: 210rpx;
				height: 164rpx;
				border-radius: 12rpx;
			}

			.right-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				margin-left: 20rpx;

				.title {
					font-size: 28rpx;
					color: #101010;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					white-space: normal;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tag {
						height: 32rpx;
						background-color: rgba(27, 140, 239, 0.11);
						font-size: 22rpx;
						line-height: 32rpx;
						color: #1B77EF;
						padding: 0 15rpx;
						margin-right: 20rpx;
					}

					.hits-icon {
						width: 24rpx;
						height: 19rpx;
					}

					.hits {
						font-size: 22rpx;
						color: #999999;
						margin-left: 5rpx;
					}

					.inputtime {
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.text {
		width: 100vw;
		text-align: center;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #747984;

		.phone {
			margin-left: 8rpx;
			color: #418BFE;
		}
	}
</style>